<template>
    <div class="GoodsList">
      <!-- 头部 -->
        <div class="Header">
          <RouterLink to="/" class="iconfont icon-shouye2 home"></RouterLink>
          <div class="fontSize">网易严选</div>
          <div class="right">
            <RouterLink to="/search" class="iconfont icon-sousuo search"></RouterLink>
            <div class="iconfont icon-gouwuche shopping"></div>
          </div>
        </div>

        <!-- 导航栏 -->
      <van-tabs 
      v-model:active="active"
      color="red"
      :offset-top="100"
      class="active"
      @click-tab="getGoodsList"
      >
        <van-tab :name="item.id" :title="item.name" v-for="item in categoryL2List" :key="item.id">
         
        </van-tab>
      </van-tabs>
      <div class="navBar" >
          <div class="border"></div>
          <div class="HeaderText">{{ nameList.name }}</div>
          <div class="Main">

            <div @click="goDetail" class="MainLeft" v-for="item in GoodsList" :key="item.id">
              <img class="oo" :src="item.topLogo.logoUrl" alt="">
              <div style="margin-left: 15px;">
              <img class="MainLeftImage" :src="item.primaryPicUrl" alt="">
              <div class="MainLeftBottom">
                <div class="MainLeftBottomImage">
                   <img class="MainLeftBottomImage" :src="attr1.logoUrl" alt="" v-for="(attr1,index) in item.preLogo" :key="index">
                    <span class="MainLeftBottomText">{{ item.name }}</span>
                </div>
                <div class="MainLeftBottomImage1" v-for="attr3 in item.itemTagList" :key="attr3.itemId">
                  <img class="MainLeftBottomImage" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">
                  <span class="MainLeftBottomImageText">{{ attr3.name }}</span>
                </div>
                <div class="MainLeftBottomImage2">
                  <span class="MainLeftBottomImage2Text">到手<span class="MainLeftBottomImage2Yuan">￥{{ item.retailPrice }}</span></span>
                  <span class="MainLeftBottomImage2Span">￥{{ item.sortOriginPrice }}</span>
                </div>
                <div  class="MainLeftBottomImage3Span" >
                    <span  class="span">{{ item.finalPriceInfoVO?.banner?.title}}</span>
                    <span  class="span1">{{ item.finalPriceInfoVO?.banner?.content }}</span>
                </div>
                <div class="MainLeftBottomImage3"> 
                  <span>满69减20元</span>
                </div>
              </div>
            </div>
          </div>
          </div>
      </div>
        <div style="height: 50px;"></div>
    </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name:'GoodsList'
  })
</script>
<script lang="ts" setup>

import {ref,onMounted,computed} from 'vue'

import {getPagingData,type categoryL2Li, type itemList} from '../../../api/cateGory'

import {useRoute,useRouter} from 'vue-router'

const router = useRoute()

const $router = useRouter()

const goDetail = ()=>{
  let call = [1,2,3,4,5,6,7,8,9,10,11,12]

  let element  = call[Math.floor((Math.random()*call.length))]

  $router.push({
    path:'/dital',
    query:{
      id:element
    }
  })
}
const {attr1,lsitID} = router.query

const categoryL2List = ref<categoryL2Li[]>([])

let attr = attr1

onMounted(()=>{
  getIndexInit()
})

const getIndexInit = async() => {
  try {
    const result = await getPagingData(attr as unknown as number,lsitID as unknown as number)

    categoryL2List.value = result.categoryL2List

    nameList.value = result.categoryItems.category 

    GoodsList.value = result.categoryItems.itemList


  } catch (error) {
    return Promise.reject(error)
  }
 
  
}



const active = ref(0);

const GoodsList= ref<itemList[]>([])

// 数据列表
const nameList = ref({
  bannerList: null,
  bannerUrl: '',
  categoryType: '',
  extra: null,
  frontDesc: '',
  frontName: '',
  frontNameIcon: null,
  iconUrl: null,
  id: 0,
  imgUrl: null,
  level: null,
  name: '',
  showIndex: '',
  subCateList: [],
  superCategoryId: '',
  type: 0,
  wapBannerUrl: '',
  wapExpandPicTargetUrl: null,
})


const getGoodsList = (tid:any)=>{
  // 解构需要的值
  const {name} = tid

  attr = name

  getIndexInit()
}

</script>

<style lang="less" scoped>
.Header{
  height: 45px;
  display: flex;
  background-color:  #fafafa;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e4e4e4 ;
  color: #747474;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  .fontSize{
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 2px;
  }
  .home{
    font-size: 25px;
    margin-left: 10px;
    margin-right: 30px;
  }
  .right{
    display: flex;
    margin-right: 10px;
    .search{
    font-size: 25px;
  }
  .shopping{
    font-size: 25px;
    margin-left: 5px;
    
  }
  }
 
}
.navBar{
  
  .border{
    margin-top: 5px;
    border: 5px solid #eeeeee;
  }
  .HeaderText{
    text-align: center;
    margin-top: 70px;
    font-size: 15px;
    color: black;
    margin-bottom: 12px;
  }
  .Main{
    display: flex;
    flex-wrap: wrap;
    .MainLeft{
      width: 172px;
      margin-left: 5px;
      margin-bottom: 10px;
      margin-left: 5px;
      position: relative;
      .MainLeftImage{
        width: 158px;
        height: 158px;
        border-radius: 5px;
        background-color: #c9c8c8;
      }
      .MainLeftBottom{
        width: 158px;
        .MainLeftBottomImage3{
          display: block;
          border: 1px solid;
          width: 71px;
          font-size: 11px;
          border-radius: 25px;
          background-color: red;
          color: #ffffff;
          text-align: center;
        }
        .MainLeftBottomImage2{
          
          .MainLeftBottomImage2Text{
            font-size: 12px;
            color: red;
            .MainLeftBottomImage2Yuan{
              font-size: 20px;
            }
          }
          .MainLeftBottomImage2Span{
            text-decoration:line-through;
            font-size: 11px;
            margin-left: 5px;
          }
        }
        .MainLeftBottomImage3Span{
          width: 160px;
          display: flex;
          background-color: #ffe9eb;
          border-radius: 25px;
          margin-bottom: 10px;
          .span{
            display: block;
            border: 1px solid;
            background-color: red;
            border-radius: 25px;
            height: 20px;
            color: white;
            line-height: 20px;
          }
          .span1{
            width: 110px;
            height: 20px;
            font-size: 12px;
            line-height: 20px;
            overflow: hidden; /*超出部分隐藏*/
            text-overflow: ellipsis; /*超出部分省略号表示*/
            white-space: nowrap; /*强制单行显示*/
            display: inline-block; /*转换为行内块元素*/
            color: red;
          }
        }
        .MainLeftBottomImage1{
            border: 1px solid #dfdfdf;
            border-radius: 25px;
            width: 73px;
            height: 17px;
            display: flex;
            align-items: center;
            color: black;
            .MainLeftBottomImage{
              width: 7px;
              height: 11px;
              margin-left: 5px;
            }
            .MainLeftBottomImageText{
              font-size: 12px;
              text-align: center;
            }
          }
        .MainLeftBottomImage{
          .MainLeftBottomImage{
            width: 16px;
            height: 15px;
            margin-right: 2px;
          }
          .MainLeftBottomText{
            font-size: 11px !important;
            color: black;
          }
        }
      }
    }
  }
}
:deep(.van-tab--grow){
  font-size: 15px;
  height: 30px;
  padding: 10px;
  margin-right: 10px;
}
:deep(.van-tabs__line){
  border-bottom: 1px solid #dd2d34;
  width: 50px;
  height: 0px;
}

:deep(.van-tabs__wrap){
display: flex;
}

:deep(.van-tabs__wrap){
  height: 35px;
}

.active{
  position: fixed;
  top: 50px;
  z-index: 998;
}

.oo{
  position: absolute;
  right: 0;
  width: 70px;
  height: 35px;
}
</style>
